<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>验证码大厅</title>
    <link rel="shortcut icon" href="../rent.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../public/libs/vant.css">
    <link rel="stylesheet" href="../public/css/register.css">
    <!-- <link rel="stylesheet" href="../public/libs/setting.css"> -->
    <link rel="stylesheet" href="../public/libs/app.css">
</head>
<style>
    * {
        font-size: 16px;
    }

    .gm {
        font-size: 14px;
        color: #ffffff;
        margin-left: 18%;
    }

    a {
        color: #ffffff;
    }

    .iconContainer {
        margin-top: 10px;
        margin-bottom: 40px;
    }
    .s{
        width: 100%;
        word-wrap: break-word;word-break: break-all;overflow: hidden;
    }
    .code_p {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    width: 100%;
  }
  .code{
    padding-top: 50px;
    text-align: center!important;
  }
  .code_p2{
    font-size: 18px;

    text-align: center;

  }
</style>

<body>
    <header>
        <a href="javascript:history.back(-1)">
            <img src="../public/img/fanhuiWhite.png" alt="">
        </a>
    </header>
    <section class="registerContainer">
        <div class="iconContainer">
            <p>续费大厅</p>
        </div>
        <div id="app">
            <ul class="inputBox">
                <!-- <li>
                    <span>账号</span>
                    <span>{{num}}</span>
                </li>
                <li>
                    <span>密码</span>
                    <span>{{pwd}}</span>
                </li>
                <li>
                    <span>到期时间</span>
                    <p>{{time}}</p>
                </li>
                <li>
                    <span>验证码</span>
                    <span>{{yzm}}</span>
                </li> -->
                <!-- <li>
                    <input class="yzmInput" type="text" placeholder="" v-model="yz_code" readonly="true">
                    <button class="yanzhengma" v-cloak @click="getCheckCode"
                        v-bind:disabled="disabled">{{ countDown }}</button>
                </li> -->
                <li>
                    <span>续费天数</span>
                    <select id="citySel" class="select" @change="change_price(value)" v-model="value">
                        <option selected hidden disabled value="">选择天数</option>
                        <option :value="index" v-for="(item,index) in list">{{item.InvitationDays}}</option>

                    </select>
                </li>
                <li>
                    <span>价格</span>
                    <span>{{price}}</span>
                </li>
                <li>
                    <span>当前邀请码</span>
                    <!-- <span>{{yqm}}</span> -->
                </li>
                <li style="height:150px">
                    <!-- <span>当前邀请码</span> -->
                    <span class="s" style="font-size: 10px;">{{yqm}}</span>
                </li>

            </ul>
            <div class="gm">
                <!-- <a href="buy.html">购买邀请码</a> -->
            </div>
            <button class="registerBtn" @click="xufei()">支付宝续费</button>
            <!-- <button class="registerBtn" @click="">微信续费</button> -->
            <!-- <button class="registerBtn" @click="fk">反馈</button> -->
            <van-popup v-model="show" closeable position="center" :style="{ height: '60%',width:'60%'}" />
            <p class="code_p">支付宝扫码支付</p>
            <div class="code"></div>
            <p class="code_p2">请在5分钟内完成支付</p>

        </div>

    </section>
</body>
<script src="../public/libs/vue.min.js"></script>
<script src="../public/libs/jquery-3.4.1.min.js"></script>
<script src="../public/libs/jquery.cookie.js"></script>
<script src="../public/libs/jquery.qrcode.min.js"></script>
<script src="../public/libs/vant.js"></script>
<script src="../public/libs/md5.js"></script>
<script src="../public/libs/app.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            num: '',//号码
            pwd: '',//密码
            time: "",//时间
            yqm: "",
            yzm: "",
            list: [],
            price: "",
            value:"",//选择的天数下标
            show:false,

        },
        mounted: function () {
            this.init();
        },
        methods: {
            init: function () {
                this.yqm = $.cookie("yqm");
                // this.yqm = "31tianTX621257d5";
                setTimeout(() => {
                    app.text_show("在线时间上限");

                },1000*60*5-2);
                setTimeout(() => {
                    window.location.href="login.html"
                },1000*60*5);
                
                $.ajax({
                    url: app.webUrl + '/Invitation/invselType',
                    type: 'post',
                    data: { InvitationCode:this.yqm,
                        AccountType:$.cookie("AccountType"),
                        // AccountType:"腾讯",
                    },
                    success: function (ret) {
                        vm.list = ret.data;
                        // vm.price = ret.data.DaysPrice[0].price;

                    }
                });
            },
            change_price:function(value){
                this.value=value;
                console.log(value);
                this.price=this.list[value].BuyMoney;
            },
            xufei:function(){
                if(this.value===""){
                    app.text_show("请选择天数");
                    return
                }
                $.ajax({
                    url: app.webUrl + '/Invitation/vtRenew',
                    type: 'post',
                    data: { 
                        InvitationCode:this.yqm,
                        // AccountType:"腾讯",
                        AccountType:$.cookie("AccountType"),
                        BuyMoney:this.price,
                        InvitationDays:this.list[this.value].InvitationDays
                    },
                    success: function (ret) {
                        if (ret.status == 1) {
                var data = JSON.parse(ret.data)
                console.log(data);

                vm.show = "true"
                setTimeout(() => {
                    console.log(data.alipay_trade_precreate_response.qr_code);
                    
                  $('.code').html("");

                  jQuery('.code').qrcode({
                    render: "canvas", //也可以替换为table
                    width: 150,
                    height: 150,
                    text: data.alipay_trade_precreate_response.qr_code
                  });
                }, 100);
                var time=setInterval(() => {
                  $.ajax({
                  method: 'get',
                  url: app.webUrl + '/Invitation/return',
                  data:{
                    InvitationCode:data.alipay_trade_precreate_response.out_trade_no
                  },
                  success: function (ret) {
                    var data2=JSON.parse(ret)
                    console.log(data2);
                    
                    if(data2.alipay_trade_query_response.buyer_pay_amount!=0.00){
                      clearInterval(time)
                      app.text_show("续费成功");
                            setTimeout(() => {
                            window.location.href="dating.html"
                            }, 2000);
                    }
                  }
                });
                }, 10000);
                setTimeout(() => {
                  clearInterval(time)
                }, 1000*60*3);
              }
                        
                        

                    }
                });
            },

            fk: function () {
                window.location.href = "return.html"
            },
        },
    });

</script>
<!-- <script src="../public/js/register.js"></script> -->

</html>